<template>
  <div class="container">
    <el-row class="searchInputWidth">
      <el-form :inline="true" :model="map" ref="listForm">
        <el-col :lg="8" :xl="6">
          <el-form-item label="标题" class="row-padding-bottom">
            <el-input
              placeholder="搜索操作说明"
              clearable
              v-model.trim="map.title"
              @blur="map.title = changeValue($event)"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-form-item>
          <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchTable" class="commonBtn"></el-button> -->
          <el-button
            type="primary"
            icon="icon iconfont iconchazhao1"
            @click="searchTable"
            class="searchBtn"
          >
            <span>搜索</span>
          </el-button>
          <exportBtn
            v-if="!isShowAdd"
            :dataLen="tableData.length"
            :filterField="filterField"
            api="api-s/report/export_SYS_HELP"
          ></exportBtn>
        </el-form-item>
        <!-- <el-form-item>
                    <exportBtn :dataLen="tableData.length" :filterField="filterField" api="api-s/report/export_SYS_HELP"></exportBtn>
                </el-form-item>
                <el-form-item>
                    <el-button class="commonBut saveBtn funComBut"  icon="icon iconfont icontianjia"  @click="addHelp" v-show="isShowAdd">
                        <span class="opetareText">添加</span>
                    </el-button>
                </el-form-item> -->
      </el-form>
    </el-row>
    <div class="spacing"></div>
    <div
      ref="tableBox"
      :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
    >
      <div style="margin-bottom: 24px" v-if="isShowAdd">
        <exportBtn
          :dataLen="tableData.length"
          :filterField="filterField"
          api="api-s/report/export_SYS_HELP"
        ></exportBtn>
        <el-button
          class="commonBut saveBtn funComBut"
          icon="icon iconfont icontianjia"
          @click="addHelp"
        >
          <span class="opetareText">添加</span>
        </el-button>
      </div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        v-loading="loading"
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          align="center"
          prop="title"
          label="标题"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sort"
          label="序号"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="about"
          label="简介"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="menuName"
          label="涉及功能页面"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column align="left" label="操作" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-link
                type="primary"
                @click="seeDetail(scope.row.id)"
                v-if="isShowDetail"
                >查看详情</el-link
              >
              <el-link
                type="primary"
                @click="updateHelp(scope.row.id)"
                v-show="isShowUpdate"
                >编辑</el-link
              >
              <el-link
                type="primary"
                @click="onDelConfirm(scope.row.id)"
                v-show="isShowDel"
                >删除</el-link
              >
              <el-link
                type="primary"
                @click="isShow(scope.row)"
                v-show="isShowUpdate"
                >{{ scope.row.isShow == 'YES' ? '隐藏' : '显示' }}</el-link
              >
            </div>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isEmpty">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <!-- filterField为搜索条件 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'helpList',

  props: ['clientType'],
  data() {
    return {
      filterField: {
        map: '',
      },
      map: {
        title: '',
        clientType: this.clientType,
      },
      tableData: [],
      loading: true,
      isEmpty: false,
      requestUrl: 'api-m/help/list',
      isShowDetail: '',
      isShowDel: '',
      isShowUpdate: '',
      isShowAdd: '',
    }
  },
  created() {
    this.filterField.map = JSON.stringify(this.map)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('helpSet:detail') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('helpSet:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('helpSet:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('helpSet:delete') > -1
  },
  methods: {
    //加载列表
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isEmpty = true
      }
    },
    //列表查询
    searchTable() {
      this.filterField.map = this.filterField.map = JSON.stringify(this.map)
      this.$refs.pagination.getTableListData()
    },
    addHelp() {
      this.$router.push({
        path: '/home/help/helpEdit',
        name: 'helpEdit',
        query: {
          editStatus: 'add',
          clientType: this.clientType,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/help/helpTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    updateHelp(id) {
      this.$router.push({
        path: '/home/help/helpEdit',
        name: 'helpEdit',
        query: {
          editStatus: 'edit',
          helpId: id,
          clientType: this.clientType,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/help/helpTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    onDelConfirm(id) {
      this.$confirm('确认删除?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.onDel(id)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    onDel(id) {
      this.axios({
        method: 'post',
        url: 'api-m/help/update',
        data: {
          id: id,
          isDeleted: 0,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('删除失敗')
          this.isSaveLoading = false
        })
    },
    seeDetail(id) {
      this.$router.push({
        path: '/home/help/helpDetail',
        name: 'helpDetail',
        query: {
          helpId: id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/help/helpTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    isShow(row) {
      let isShow = row.isShow == 'YES' ? 'NO' : 'YES'
      this.axios({
        method: 'post',
        url: 'api-m/help/update',
        data: {
          id: row.id,
          isShow: isShow,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '设置成功',
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('设置失敗')
          this.isSaveLoading = false
        })
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
//修改搜索栏上下间距为24px
// .container{
// .el-form{
//     margin-top: 20px;
// }
// }
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/.el-form-item__label {
    width: 82px;
  }
}
</style>
